<template>
  <div style="background: #3a3e55;text-align: center;width: 100%;height:100%;position:absolute;overflow: hidden">
    <div style="position: absolute;height:100%;width: 100%;">
      <img src="../../../assets/images/login1_bg.png" style="width: 100%;">
    </div>
    <br><br>
    <div  style="position: absolute;height:100%;width: 100%;">
      <img src="../../../assets/images/logo.png" style="width: 40%;border-radius: 10px;" alt=""><br>
      <div class="loginBox">
        <!--<p>采购商平台</p>-->
        <div class="login-text">
          <div class="login-user">
            <i class="iconfont icon-wode"></i>
            <input type="text" v-model="mobile" @change="verifyMobile" class="login-test" placeholder="请输入手机账号">
            <icon :type="iconUser" style="float: right;font-size: 16px;line-height:30px;"></icon>
          </div>
        </div>
        <div class="login-text">
          <div class="login-user">
            <i class="iconfont icon-mimaguanli"></i>
            <input type="password" v-model="password" @change="verifyPass" class="login-test" placeholder="请输入6-16位数字及字母组合">
            <icon :type="iconPass" style="float: right;font-size: 16px;line-height:30px;"></icon>
          </div>
        </div>
        <br><br>
        <box gap="0 15px"><x-button type="primary" style="width:95%;background-color: #33bb99;color:#242321;letter-spacing: 5px;" @click.native="login">登录</x-button></box>
        <div style="line-height: 30px;color: #fff;font-size: 14px;width: 85%;margin: 0 auto;">
          <span style="float: left;" @click="toChange">忘记密码？</span>
          <span style="float: right" @click="sign">我要注册</span>
        </div>
      </div>
      <toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text="toastMsg" :position="position"></toast>
    </div>
  </div>
</template>

<script>
  import { md5 } from 'vux'
  export default {
    components: {},
    data() {
      return {
        mobile: '18919065803',
        password: '123456',
        iconUser:'',
        iconPass:'',
        count: 0,
        tt: 0,

        showPositionValue: false, // Toast提示
        position: 'default',
        toastMsg: '',
      }
    },
    methods: {
      // 信息提示
      msg(str){
        this.showPositionValue = true;
        this.position = 'middle';
        this.toastMsg = (str);
      },
      // 验证手机号
      verifyMobile(){
        this.iconUser = this.public.isMobile(this.mobile)?'success':'warn'
        return this.public.isMobile(this.mobile)?true:false
      },
      // 验证密码
      verifyPass(){
        this.iconPass = this.public.pwd1(this.password)?'success':'warn'
        return this.public.pwd1(this.password)?true:false
      },
      // 提交登录前验证
      valid(){
        if(this.verifyMobile() && this.verifyPass()){
          return true
        }
      },
      // 登录
      login(){
        if(!this.valid()) return;
        this.$vux.loading.show({
          text: 'Loading'
        });
        this.config0.post('/supply/appLogin/login', {
          mobile: this.mobile,
          pwd: md5(this.password),
        }).then(res=>{
          if(res.data.code==0){
            this.$vux.loading.hide();
            setTimeout(()=>{
              this.$router.push('/project0/home');
            },200)
            this.msg(res.data.message);
          }else{
            this.msg(res.data.message);
          }
        }).catch(err=>{
          this.$vux.loading.hide();
          this.msg('网络错误');
        })
      },
      // 计时器
      setTime(){
        this.count = 60;
        this.tt = setInterval(s=>{
          this.count -= 1;
          if(this.count<=0){
            clearInterval(this.tt);
            this.$router.push('/project1/home');
          }
        }, 1000)
      },
      // 忘记密码
      toChange(){
        console.log('忘记密码')
      },
      // 注册
      sign(){
        this.$router.push('/project0/sign');
      }
    },
    mounted(){
    }
  }
</script>
<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .loginBox{
    padding-top:20px;
    text-align: center;
    font-family: 微软雅黑;
  }
  .login-test::-webkit-input-placeholder{
    color:#e1e1e4;
    font-size:14px;
  }
  .login-test::-moz-placeholder{
    color:#e1e1e4;
    font-size:14px;
  }
  .login-test:-ms-input-placeholder{
    color:#e1e1e4;
    font-size:14px;
  }
  .login-text{
    width:85%;
    margin:35px auto;
  }
  .login-user{
    line-height:30px;
    border-bottom:1px #fff solid;
    padding:0 10px;
    color: #fff;
    text-align: left;
  }
  .iconfont{
    font-size:22px;
  }
  input{outline:none;}
  .login-test{
    outline:none;
    background: none;
    line-height:30px;
    font-size: 16px;
    padding-left:5px;
    color:#fff;
    border:0;
  }
</style>
